Ext.define('ES.view.componentDetail.CompDetail',{
	extend:'Ext.container.Container',
	alias:'widget.compdetail',
	requires:['ES.view.search.SearchBox','Ext.form.field.TextArea','Ext.form.field.Radio','Ext.form.FieldContainer','ES.view.componentDetail.CommentsComp'],
	width:'100%',
	layout:{
		type:'vbox',
		pack:'center',
		align:'center',
		defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
	},
	config:{
		pic:'',
		title:'',
		rating:0,
		overview:'',
		compId:0,
		envSupport:[],
		langSupport:[],
		version:0
	},
	loadTreeFun:function(store){
		Ext.ComponentQuery.query('compcat[page=detail'+this.compId +']')[0].setRootNode(store.getRootNode())
	},
	initComponent:function(){
		var me = this;
		this.items=[
        	{
        		xtype:'container',
        		width:'100%',
        		layout:{
        			type:'hbox',
        			align:'top',
        			pack:'start',
        			defaultMargins:{top: 0, right: 10, bottom: 0, left: 0}
        		},
    			items:[
    				{
    					xtype:'container',
    					width:'80%',
    					layout:{
							type:'vbox',
							pack:'center',
							align:'center',
							defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
						},
						items:[
							{	
				        		xtype:'container',
				        		width:'80%',
				        		layout:{
				        			type:'hbox',
				        			align:'top',
				        			pack:'start',
				        			defaultMargins:{top: 0, right: 20, bottom: 0, left: 0}
				        		},
				        		items:[
				        			{
				        				xtype:'image',
				        				width:150,
				        				height:150,
				        				src:this.pic,
				        				padding:'5 5 5 5'
				        			},
				        			{
				        				xtype:'container',
				        				width:'60%',
				        				layout:{
				        					type:'vbox',
				        					pack:'start',
				        					align:'left'
				        				},
				        				items:[
				        					{
				        						xtype:'component',
				        						html:this.title,
				        						style:{
								        			fontSize:'20',
								        			color:'#6DB8E0',
													fontWeight:'bold'
								        		}
				        					},
				        					{
				        						xtype:'component',
				        						html:'version:' + me.version,
				        						style:{
													fontWeight:'bold',
													textDecoration:'underline'
								        		}
				        					},
				        					{
				        						xtype:'component',
				        						html:'Over all rating',
				        						padding:'10 0 0 0'
				        					},
				        					{
												xtype:'ratingcomp',
												rating:this.rating
											},
											{
				        						xtype:'component',
				        						html:'Your rating',
				        						padding:'10 0 0 0'
				        					},
				        					{
									            xtype      : 'fieldcontainer',
									            fieldLabel : '',
									            width:150,
									            defaultType: 'radiofield',
									            defaults: {
									                flex: 1
									            },
									            layout: 'hbox',
									            items: [
									                {
									                    boxLabel  : '1',
									                    name      : 'uRating',
									                    inputValue: '1'					                    
									                },
									                {
									                    boxLabel  : '2',
									                    name      : 'uRating',
									                    inputValue: '2'
									                },
									                {
									                    boxLabel  : '3',
									                    name      : 'uRating',
									                    inputValue: '3'
									                },
									                {
									                    boxLabel  : '4',
									                    name      : 'uRating',
									                    inputValue: '4'
									                },
									                {
									                    boxLabel  : '5',
									                    name      : 'uRating',
									                    inputValue: '5'
									                }
									            ]
									        },
									        {
									        	xtype:'component',
									        	html:this.overview,
									        	padding:'10 0 0 0'	
									        }
				        				]
				        			},
				        			{
				        				xtype:'container',
				        				border:1,
				        				width:'20%',
				        				layout:{
				        					type:'vbox',
				        					defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
				        				},
				        				items:[
				        					{
				        						xtype:'component',
				        						html:'Language Support',
				        						style:{
													fontWeight:'bold',
													fontSize:12,
													color:'#6DB8E0'
												}
				        					},
				        					{
				        						xtype:'container',
				        						border:1,
				        						height:100,
				        						width:'100%',
				        						style:{
						        					borderStyle:'solid',
						        					borderColor:'#CCCCCC'
						        				},
				        						layout:{
				        							type:'vbox',
				        							defaultMargins:{top: 5, right: 5, bottom: 0, left: 5}
				        						},
				        						onRender:function(){
				        							var langSupportArray = new Array();
				        							for(var i = 0 ; i < me.langSupport.length; i++)
				        							{
				        								langSupportArray.push({
				        									xtype:'component',
				        									html:me.langSupport[i]
				        								});
				        							}
				        							this.add(langSupportArray);
													this.superclass.onRender.call(this);
												}
				        					}
				        				]
				        			}
				        		]
				        	},
				        	{
				        		xtype:'container',
				        		width:'80%',
				        		layout:{
				        			type:'hbox',
				        			align:'middle',
				        			pack:'start',
				        			defaultMargins:{top: 0, right: 30, bottom: 0, left: 0}
				        		},
				        		items:[
				        			{
				        				xtype:'container',
				        				layout:'vbox',
				        				items : [
				        					{
				        						xtype:'component',
				        						html:'Environment Support',
				        						style:{
				        							fontSize:15,
				        							color:'#6DB8E0',
													fontWeight:'bold'
				        						}
				        					},
				        					{
				        						xtype:'container',
				        						layout:{
				        							type:'hbox',
				        							defaultMargins:{top: 0, right: 5, bottom: 0, left: 0}
				        						},
				        						onRender:function(){
				        							var evnArray = new Array();
				        							for(var i = 0 ; i < me.envSupport.length; i++)
				        							{
				        								var env = me.envSupport[i];
				        								switch(env)
				        								{
				        									case 'ie':
				        									{
				        										evnArray.push({
				        											xtype:'image',
				        											src:'app/assets/ie.png',
				        											title:'Internet Explorer'
				        										});
				        										break;
				        									}
				        									case 'firefox':
				        									{
				        										evnArray.push({
				        											xtype:'image',
				        											src:'app/assets/firefox.png',
				        											title:'Mozilla Firefox'
				        										});
				        										break;
				        									}
				        									case 'chrome':
				        									{
				        										evnArray.push({
				        											xtype:'image',
				        											src:'app/assets/chrome.png',
				        											title:'Google Chrome'
				        										});
				        										break;
				        									}
				        									case 'opera':
				        									{
				        										evnArray.push({
				        											xtype:'image',
				        											src:'app/assets/opera.png',
				        											title:'Opera'
				        										});
				        										break;
				        									}
				        									case 'safari':
				        									{
				        										evnArray.push({
				        											xtype:'image',
				        											src:'app/assets/safari.png',
				        											title:'Apple Safari'
				        										});
				        										break;
				        									}
				        								}
				        							}
				        							this.add(evnArray);	
													this.superclass.onRender.call(this);
												}
				        					}
			        					]
				        			},
				        			{
				        				xtype:'button',
				        				text:'Download [10KB]',
				        				width:200,
				        				height:30
				        			},
				        			{
				        				xtype:'button',
				        				text:'Manual',
				        				width:150,
				        				height:30
				        			}
				        		]
				        	},
				        	{
				        		xtype:'component',
				        		width:'80%',
				        		html:'<hr/>'
				        	},
				        	{
				        		xtype:'container',
				        		layout:{
				        			type:'vbox',
				        			pack:'start'
				        		},
				        		width:'80%',
				        		items:[
				        			{
				        				xtype:'component',
				        				html:'Your comments',
				        				style:{
				        					fontSize:15,
		        							color:'#6DB8E0',
											fontWeight:'bold'
				        				}
				        			},
				        			{
				        				xtype:'container',
				        				width:'100%',
				        				layout:{
				        					type:'hbox',
				        					defaultMargins:{top: 0, right: 10, bottom: 0, left: 0}
				        				},
				        				items:[
				        					{
				        						xtype:'textareafield',
				        						name:'uComment',
				        						flex:.5,
				        						height:100
				        					},
				        					{
						        				xtype:'button',
						        				text:'Submit',
						        				width:150,
						        				height:30,
						        				flex:.15
						        			},
						        			{
						        				xtype:'container',
						        				layout:{
						        					type:'vbox',
						        					pack:'center',
						        					defaultMargins:{top: 0, right: 0, bottom: 5, left: 20}
						        				},
						        				flex:.25,						        				
						        				border:1,
						        				style:{
						        					borderStyle:'solid',
						        					borderColor:'#cccccc'
						        				},
						        				items:[
							        				{
							        					xtype:'component',
							        					html:'Views',
							        					style:{
						        							fontWeight:'bold'
						        						},
						        						padding:'10 0 0 0'	
							        				},
							        				{
							        					xtype:'component',
							        					html:'7',
							        					style:{
						        							fontWeight:'bold'
						        						}	
							        				},
							        				{
							        					xtype:'component',
							        					html:'Downloads',
							        					style:{
						        							fontWeight:'bold'
						        						}	
							        				},
							        				{
							        					xtype:'component',
							        					html:'5',
							        					style:{
						        							fontWeight:'bold'
						        						},
						        						padding:'0 0 10 0'	
							        				}
						        				]
						        			}
				        				]
				        			}
				        		]
				        	},
				        	{
				        		xtype:'container',
				        		layout:{
				        			type:'vbox',
				        			defaultMargins:{top: 15, right: 0, bottom: 0, left: 0}
				        		},
				        		width:'80%',
		        				items:[
		        					{
		        						xtype:'component',
		        						html:'Comments',
		        						style:{
		        							fontSize:15,
		        							color:'#6DB8E0',
											fontWeight:'bold'
		        						}
		        					},
		        					{
		        						xtype:'commentscomp',
		        						comments:this.comments,
		        						border:1,
						        		style:{
				        					borderStyle:'solid',
				        					borderColor:'#cccccc'
				        				}
		        					}
		        				]
				        	}
						]
    				},
    				{
        				xtype:'container',
        				layout:{
        					type:'vbox',
        					defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
        				},
        				items:[
        					{
        						xtype:'button',
        						text:'+&nbsp;&nbsp;&nbsp;Upload your component',
        						action:'upload',
        						width:200,
        						height:30
        					},
        					{
        						xtype:'compcat',
        						width:200,
        						page:'detail' + this.compId
        					}
        				]
        			}
    			]
    		}
		]
		this.callParent(arguments);
	}
});